<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue生命周期</title>
		<script src="../vue@3.2.23.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-text="ins">23424</div>
			<div v-html="strong"></div>
			<div v-bind:title="strong">属性绑定</div>
			<input type="text" @change="cgModel()" v-model="model">
			<div v-if="num == 1">1</div>
			<div v-else-if="num == 2">2</div>
			<div v-else>2323423432424</div>
			<div>
				<div v-for="(i,index) in goods" @click="add(index)">
					<div>{{i.name}}{{i.price}}元，选中数量{{i.csNum}}</div>
				</div>
			</div>
			<table border="1">
				<tr>
					<td>商品</td>
					<td>价格</td>
					<td>数量</td>
					<td>总价</td>
					<td>操作</td>
				</tr>
				<tr v-for="(i,index) in allPrice">
					<td>{{i.name}}</td>
					<td>{{i.price}}</td>
					<td>{{i.csNum}}</td>
					<td>{{i.allPrice}}</td>
					<td><button @click="add(index)">添加</button><button @click="loss(index)">减少</button></td>
				</tr>
				<tr>
					<td colspan="4">价格</td>
					<td>{{pay}}</td>
				</tr>
				
			</table>
			
		</div>
	</body>
	<script>
		//结构赋值
		const {createApp}=Vue
		const app=createApp({
			data(){
				return {
					ins:0,
					title:'你好vue',
					strong:'<strong>强壮的vue</strong>',
					model:'我是model',
					num:3,
					goods:[{
						name:'可口可乐',
						price:3,
						csNum:0
					},
					{
						name:'真果粒',
						price:4,
						csNum:0
					}]
				}
			},
			methods:{
				sayHi(){
					console.log("hi")
				},
				cgModel(){
					alert(this.model)
				},
				add(index){
					this.goods[index].csNum++
				},
				loss(index){
					if(this.goods[index].csNum<=0){
						return 
					}
					this.goods[index].csNum--
				}
			},
			computed:{
				allPrice(){
					return this.goods.map(val=>{
						let allPrice=val.price * val.csNum
						return{
							...val,
							allPrice
						}
					})
					// return function(goods){
					// 	return goods.price*goods.csNum
					// }
				},
				pay(){
					let sum=0
					this.allPrice.forEach(val=>{
						sum+=val.allPrice
					})
					return sum
				}
			},
			watch:{
				model(after,before){
					console.log("更新为"+after)
					console.log("旧数据"+before)
				}
			},
			//创建实例之前
			beforeCreate() {
				console.log("beforeCreate");
			},
			//创建实例之后
			created(){
				console.log("created");
			},
			//挂载之前
			beforeMount(){
				console.log("beforeMount");
			},
			//挂载之后
			mounted(){
				let _that= this
				setInterval(()=>{
					_that.ins++
				},1000)
				console.log("mounted");
			},
			//卸载之后
			unmounted() {
				console.log("unmounted");
			},
			//更新之前
			beforeUpdate() {
				console.log("beforeUpdate");
			},
			//更新之后
			updated(){
				console.log("updated");
			}
		})
		//创建实例
		const vm=app.mount("#app")
	</script>
</html>